<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css" />
    <link rel="stylesheet" href="./lib/throttle.css" />
  </head>

  <body>
    <!-- 外层的盒子 -->
    <div class="box">
      <!-- 思聪 -->
      <img src="./img/photo.gif" class="photo" alt="" />
    </div>

    <!-- 发射的按钮 -->
    <button class="btn btn-primary btn-fire">Fire</button>

    <script src="./lib/jquery-v3.6.0.js"></script>
    <script>
      $(function () {
        // 这个动画的要求就是要让用户在单位时间内无论点击几次，都只执行一次，这就需要节流才能够做到
        // 节流的核心思想就是在一个事件开始执行之后就防止同样的事情执行,一段时间过去后又重新打开开关
        // 在这里的时间是由动画控制的,也就是动画开始后我们就要让动画不再被执行

        let isOk = false;//是否已经发送
        $('.btn-fire').on('click', function () {
          // 1. 动态创建子弹的 DOM 对象
          if(isOk)  return//这里是判断如果已经发送了，就不发送了
          isOk=true//只要走到这个位置，表示一定没有发送过
          const newBall = $(
            '<img src="./img/bullet.png" class="ball" alt="" />',
          );
          // 2. 将子弹添加到页面的盒子中
          $('.box').append(newBall);
          // 3. 执行动画
          newBall.animate({ left: '95%' }, 1000, 'linear', function () {
            // 当动画完成之后，移除这个子弹
            $(this).remove();
            isOk=false
          });
        });
      });
    </script>
  </body>
</html>
